<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /*p{*/
        /*    background-color: aqua;*/
        /*}*/
        /* 后代选择器：在某个元素后面全部改变  */
        /*body p{*/
        /*    color: #e20606;*/
        /*}*/
        /*子选择器：一代，只实现下一代的格式改变*/
        body>p{
            color: blue;
        }
        /*相邻兄弟(弟弟，下一个标签元素）选择器：当前选中元素的下一个兄弟（同级）元素*/
        /*.active + p{*/
        /*    color: yellow;*/
        /*}*/
        /*通用兄弟选择器：当前选中元素的向下所有兄弟元素*/
        /*.active~p{*/
        /*    color: blueviolet;*/
        /*}*/
    </style>

</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>

<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p4</p>
    </li>
</ul>

</body>
</html>